<template>
	<view>
		<dsl-navbar title="职位详情" textTitle="white" backBg="white" isBack bgTopImg="#00D88F" isLike="0"></dsl-navbar>
		<view class="backgroundColor-box">

			<!-- 
			<view class="align-center rowsb padding-lr" :style="{'padding-top':StatusBar +'px'}"
				style="background-color: #00D88F;">
				<view class="cuIcon-back text-white" @click="$tools.back"></view>
				<view class="text-lg text-white text-center" style="width: 33.3%;">
					职位详情
				</view>
				<view>
					<image src="" mode="" style="width: 50rpx;height: 50rpx;"></image>
				</view>
			</view> -->
			<view class="occupation-box animation-scale-up">
				<view class="rowjbic">
					<view style="font-size: 40rpx;" class="fwb c333">{{recruitData.worktype}}</view>
					<view class="fs32 fwb" style="color: #ff0000;">{{recruitData.money}}{{recruitData.danwei}}</view>
				</view>
				<view class="flex fs24 c333 ">
					<!-- <view class=" juli">
					<image style="width: 22rpx;height: 22rpx;" src="/static/img/imgjingyan.png" mode=""></image>
					<view>经验不限</view>
				</view> -->
					<view class=" juli">
						<image style="width: 22rpx;height: 22rpx;" src="/static/img/imgdazhuan.png" mode=""></image>
						<view>{{recruitData.education}}</view>
					</view>
					<view class=" juli">
						<image style="width: 22rpx;height: 22rpx;" src="/static/img/imgquanzhi.png" mode=""></image>
						<view>{{recruitData.workxing}}</view>
					</view>
					<view class=" juli">
						<image style="width: 22rpx;height: 22rpx;" src="/static/img/imghangzhou.png" mode=""></image>
						<view>工作地点：{{recruitData.address}}</view>
					</view>
				</view>
				<view class="mt20 c333 fs24">招{{recruitData.sum}}人/{{recruitData.zhusu}}/年龄{{recruitData.age}}</view>
				<view class="flex flex-wrap">
					<view class="baseline"></view>

					<view class="tips" v-for="(item,index) in recruitData.fuli" :key='index' v-if="index <5">{{item}}</view>
				</view>
			</view>
			<view class="work-box animation-scale-up">
				<view class="rowic">
					<view class="shuxian"></view>
					<view class="fs32 fwb c333 ml15">工作内容</view>
				</view>
				<view class="mt20 fs24 c666">
					<text>{{recruitData.neiorng || '暂无'}}</text>
				</view>
			</view>
			<view class="work-box animation-scale-up" >
				<view class="rowic">
					<view class="shuxian"></view>
					<view class="fs32 fwb c333 ml15">所在地址</view>
				</view>
				<view class=" text-sm flex margin-top-sm" @click="mapMen()">
					<image src="/static/home/imgdingwei.png" mode="widthFix" style="width: 25rpx;"></image>
					<text class="margin-left-xs"> {{recruitData.address}}</text>
				</view>
				<!-- <map style="width: 100%;"></map> -->
			</view>
			<view class="work-box animation-scale-up">
				<view class="rowic">
					<view class="shuxian"></view>
					<view class="fs32 fwb c333 ml15">工作要求</view>
				</view>
				<view class="mt20 fs24 c666">
					<text>
						{{recruitData.yaoqiu || '暂无'}}
					</text>
				</view>
			</view>

			<view class="work-box animation-scale-up">
				<view class="rowic">
					<view class="shuxian"></view>
					<view class="fs32 fwb c333 ml15">截止时间</view>
				</view>
				<view class="mt40  ">
					<!-- <view  class="align-center">
						<view class="fs24 c999">开始日期：</view>
						<image class="yuanquan" src="/static/icon/imgyuan.png" mode=""></image>
						<view class="fs24 c333">2021-03-09</view>
					</view> -->
					<view class="align-center margin-tb">
						<view class="fs24 c999">工作时间：</view>
						<image class="yuanquan" src="/static/icon/imgyuan.png" mode="" style="opacity: 0;"></image>
						<view class="fs24 text-gray">{{recruitData.shangtime}}-{{recruitData.xiatime}}</view>
						<!-- |formatDate -->
						<!-- |formatDate -->
					</view>
					<view class="align-center">
						<view class="fs24 c999">截止日期：</view>
						<image class="yuanquan" src="/static/icon/imgyuan.png" mode=""></image>
						<view class="fs24 c333" v-if="recruitData.issue_type==1">长期有效</view>
						<view class="fs24 c333" v-if="recruitData.issue_type!=1">{{recruitData.issue_time | formatDate}}
						</view>
					</view>
				</view>
			</view>
			<view class="mt15 companyInfo-box animation-scale-up"
				@click="$tools.push('/pages/enterprise/enterpriseIntroduce?id='+recruitData.testuser_id)">
				<view class="background-box rowjbic">
					<view class="rowic pl20">
						<image style="width: 110rpx;height: 110rpx;border-radius: 50rpx;background-color: #FFFFFF;"
							:src="recruitData.companylogo" mode=""></image>
						<view class="ml20">
							<view class="fs24 c333">{{recruitData.companyName || '暂无'}}</view>
							<!-- <view class="fs20 c999 mt10">招聘信息：2</view> -->
						</view>
					</view>
					<image class="pr40" style="width: 12rpx;height: 21rpx;" src="/static/img/imgjiantou-1.png" mode="">
					</image>
				</view>
			</view>
			<view class="post-box animation-scale-up">
				<view class="rowic">
					<view class="shuxian"></view>
					<view class="fs32 fwb c333 ml15">该企业其他岗位</view>
				</view>
				<view v-for="(item,index) in recruitData.recruit" :key='index' @click="$tools.push('/pages/home/modules/recruit/detail?id='+item.id)">
					<view class="rowjbic mt30">
						<view class="fs32 c333 fwb">{{item.worktype}}</view>
						<view class="fwb fs30" style="color: #FF150D;">{{item.money}}K</view>
					</view>
					<view class="rowjbic mt20">
						<view class="rowic ">
							<view class="welfareTips">{{item.fuli}}</view>
						</view>
						<view class="fs20 c999"> {{item.fangshi ==1?'日结':item.fangshi==2?'周结':item.fangshi==3?'月结':''}}
						</view>
					</view>
					<view class="rowjbic cA7A7A7 fs24 mt20">
						<view>招聘{{item.sum}}人</view>
						<view style="width: 400rpx;" class="onelineshow">{{item.address}}</view>
					</view>
					<view class="bottomLine"></view>
				</view>
			</view>
			<view style="height: 200rpx;"></view>
		<!-- 	<view class="fiexdBottom rowjbic">
				<view class="rowic" @click="$tools.showToast('聊天功能暂未对接-功能暂未开放')">
					<image style="width: 46rpx;height: 46rpx;" src="/static/home/imgxiaoxi-3.png" mode=""></image>
					<view class="ml20 ask">咨询</view>
				</view>
				<view class="share" @click="$tools.showToast('功能暂未开放-等待后期页面部署')">分享奖励</view>
				<view class="sign" @click="submit()">我要报名</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import {
		recruitDetail, //详情
		recruitApply, //报名
	} from '@/common/path.js'
	export default {
		data() {
			return {
				recruitData: {}
			}
		},
		onReady() {},
		onLoad(option) {
			this.detailId = option.id
			this.recruitDetail() //职业详情
		},
		onShow() {},
		filters: {
			formatDate(data) { //时间戳的过滤
				var date = new Date(data * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
				var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
				var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
				return Y + M + D + h + m + s;
			},
		},
		methods: {
			//报名
			submit() {
				let data = {
					id: this.detailId
				}
				this.Http.POST(recruitApply, data)
					.then((res) => {
						console.log('[报名]', res);
						if (res.code == 1) {
							this.$tools.showToast(res.msg)
							setTimeout(r => {
								this.$tools.back()
							}, 1000)
						} else {
							uni.showModal({
								title: '温馨提示',
								content: res.msg
							})
						}
					})
			},
			//招聘详情
			recruitDetail() {
				let data = {
					id: this.detailId
				}
				this.Http.POST(recruitDetail, data)
					.then((res) => {
						console.log('[职位详情]', res);
						if (res.code == 1) {
							this.recruitData = res.data
						}
					})
			},
			//打开地图
			mapMen() {
				let _this = this
				let data = {
					latitude: parseFloat(_this.recruitData.lat),
					longitude: parseFloat(_this.recruitData.lng),
					success: function() {
						console.log('success');
					}
				}
				console.log(data);
				uni.openLocation(data);
			}
		},
		computed: {},
		components: {}
	}
</script>
<style>
	@import url("common.css");

	page {
		background-color: #F6F6F6;
	}

	.backgroundColor-box {
		width: 750rpx;
		height: 290rpx;
		background: #00D88F;
		border-radius: 0 0 15% 15%;
		padding-top: 50rpx;
		opacity: 1;
	}

	.topNavigation {
		padding: 0rpx 40rpx;
	}

	.occupation-box {
		width: 700rpx;
		margin-left: 20rpx;
		padding: 40rpx 30rpx 34rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		opacity: 1;
		margin: 0 auto;
	}

	.juli+.juli {
		margin-left: 43rpx;
	}

	.baseline {
		width: 700rpx;
		height: 2rpx;
		background-color: #F3F3F3;
		margin-top: 40rpx;
		margin-bottom: 26rpx;
	}

	.tips {
		font-size: 24rpx;
		background-color: #00D88F;
		height: 40rpx;
		line-height: 40rpx;
		color: #FFFFFF;
		padding: 0rpx 12rpx;
		margin-top: 12rpx;
		margin-right: 10rpx;
	}

	.tips+.tips {
		margin-right: 10rpx;
	}

	.shuxian {
		width: 4rpx;
		height: 30rpx;
		border-radius: 2rpx;
		background-color: #00D88F;

	}

	.work-box {
		padding: 22rpx 30rpx 30rpx;
		background-color: #FFFFFF;
		width: 700rpx;
		border-radius: 20rpx;
		margin: 0 auto;
		margin-top: 20rpx;
	}

	.post-box {
		padding: 22rpx 30rpx 0rpx;
		background-color: #FFFFFF;
		width: 700rpx;
		border-radius: 20rpx;
		margin-left: 20rpx;
		margin-top: 10rpx;
		margin: 0 auto;
		margin-top: 20rpx;
	}

	map {
		width: 700rpx;
		height: 220rpx;
		border-radius: 20rpx;
		margin-top: 20rpx;
	}

	.yuanquan {
		width: 18rpx;
		height: 18rpx;
		margin: 0rpx 10rpx 0rpx 15rpx;
	}

	.companyInfo-box {
		padding: 25rpx 20rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		margin-left: 20rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		width: 700rpx;
	}

	.background-box {
		width: 670rpx;
		height: 142rpx;
		background: #F7F6FA;
		opacity: 1;

	}

	.welfareTips {
		padding: 0rpx 15rpx;
		line-height: 36rpx;
		background-color: #EEEEEE;
		margin-right: 10rpx;
		font-size: 20rpx;
		color: #333333;
	}

	.welfareTips+.welfareTips {
		margin-right: 10rpx;
	}

	.bottomLine {
		width: 672rpx;
		background-color: #F6F6F6;
		margin-top: 30rpx;
		margin-left: -20rpx;
		height: 1rpx;
	}

	.fiexdBottom {
		/* width: 670rpx; */
		/* height: 98rpx; */
		/* padding: 0rpx 20rpx 0rpx 60rpx; */
		position: fixed;
		bottom: 0rpx;
		background-color: #FFFFFF;
		left: 0;
		right: 0;
		padding: 20rpx;
	}

	.ask {
		font-size: 30rpx;
		color: #00D88F;
	}

	.share {
		border: 1rpx solid #00D88F;
		border-radius: 20rpx;
		width: 230rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		font-size: 26rpx;
		color: #00D88F;
	}

	.sign {
		border-radius: 20rpx;
		width: 230rpx;
		height: 70rpx;
		background-color: #00D88F;
		opacity: 1;
		line-height: 70rpx;
		text-align: center;
		font-size: 26rpx;
		color: #FFFFFF;
	}

	pgee {
		padding-bottom: 200rpx;
	}
</style>
